<template>
  <div class="home">
    <nav-header />
    <main class="main-content">
      <div class="hero-section">
        <h1 class="hero-title">HUHA DevTools</h1>
        <p class="hero-subtitle">简单、高效的在线开发工具</p>
        
        <!-- 搜索框部分 -->
        <div class="search-section">
          <div class="search-box">
            <div class="search-input-wrapper">
              <el-icon class="search-icon"><Search /></el-icon>
              <input
                v-model="searchQuery"
                type="text"
                class="search-input"
                placeholder="搜索工具或输入关键词"
                @keyup.enter="handleSearch"
                @focus="showEngineSelect = true"
                @blur="handleBlur"
              />
              <div 
                class="engine-select"
                :class="{ active: showEngineSelect }"
                @mousedown.prevent="handleEngineClick"
              >
                <span>{{ currentEngine.name }}</span>
                <el-icon><ArrowDown /></el-icon>
              </div>
            </div>
            
            <!-- 搜索引擎选择下拉框 -->
            <transition name="fade">
              <div v-if="showEngineSelect" class="engine-dropdown">
                <div
                  v-for="engine in searchEngines"
                  :key="engine.id"
                  class="engine-option"
                  :class="{ active: currentEngine.id === engine.id }"
                  @mousedown.prevent="selectEngine(engine)"
                >
                  <div class="engine-icon">
                    <!-- 站内搜索，不要动这里的代码 -->
                    <el-icon v-if="engine.id === 'xxx'"><Search /></el-icon>
                    <!-- 搜索引擎 -->
                    <img 
                      v-else 
                      :src="engine.icon" 
                      :alt="engine.name"
                      @error="handleIconError($event, engine)"
                    />
                  </div>
                  <span class="engine-name">{{ engine.name }}</span>
                  <el-icon v-if="currentEngine.id === engine.id" class="check-icon">
                    <Check />
                  </el-icon>
                </div>
              </div>
            </transition>
          </div>
        </div>
      </div>

      <!-- 推荐工具区域 -->
      <section class="recommended-tools">
        <div class="section-header">
          <h2>
            <el-icon><Star /></el-icon>
            推荐工具
          </h2>
          <p class="subtitle">精选高效开发工具，提升您的开发效率</p>
        </div>

        <div class="tools-grid">
          <router-link
            v-for="tool in recommendedTools"
            :key="tool.id"
            :to="tool.path"
            class="tool-card"
          >
            <div class="tool-icon">
              <img :src="tool.icon" :alt="tool.name">
            </div>
            <div class="tool-info">
              <h3 class="tool-name">{{ tool.name }}</h3>
              <p class="tool-desc">{{ tool.description }}</p>
            </div>
          </router-link>
        </div>
      </section>
    </main>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { Search, ArrowDown, Check, ArrowRight, Star, Document, Files, Key, Notebook } from '@element-plus/icons-vue'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import NavHeader from '@/components/NavHeader.vue'
import googleIcon from '@/assets/icons/google.svg'
import baiduIcon from '@/assets/icons/baidu.svg'
import bingIcon from '@/assets/icons/bing.svg'
import localIcon from '@/assets/icons/local.svg'
import { tools } from '@/data/tools'

const router = useRouter()
const searchQuery = ref('')
const showResults = ref(false)
const showEngineSelect = ref(false)

// 搜索引擎配置
const searchEngines = [
  { 
    id: 'local', 
    name: '站内搜索', 
    url: '',
    icon: localIcon
  },
  { 
    id: 'google', 
    name: 'Google', 
    url: 'https://www.google.com/search?q=',
    icon: googleIcon
  },
  { 
    id: 'baidu', 
    name: '百 度', 
    url: 'https://www.baidu.com/s?wd=',
    icon: baiduIcon
  },
  { 
    id: 'bing', 
    name: 'Bing', 
    url: 'https://www.bing.com/search?q=',
    icon: bingIcon
  }
]

const currentEngine = ref(searchEngines[0])

// 推荐工具数据
const recommendedTools = ref(tools.slice(0, 6))

// 处理搜索
const handleSearch = () => {
  if (!searchQuery.value) return
  
  if (currentEngine.value.id === 'local') {
    showResults.value = true
  } else {
    window.open(currentEngine.value.url + encodeURIComponent(searchQuery.value), '_blank')
  }
}

const handleBlur = () => {
  setTimeout(() => {
    showEngineSelect.value = false
  }, 200)
}

const handleEngineClick = () => {
  showEngineSelect.value = !showEngineSelect.value
}

const selectEngine = (engine: typeof searchEngines[0]) => {
  currentEngine.value = engine
  showEngineSelect.value = false
}

const navigateToTool = (tool: any) => {
  router.push(tool.path)
}

const handleIconError = (event: Event, engine: any) => {
  (event.target as HTMLImageElement).src = `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23666" d="M16.32 14.9l5.39 5.4a1 1 0 0 1-1.42 1.4l-5.38-5.38a8 8 0 1 1 1.41-1.41zM10 16a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"/></svg>`
}

onMounted(() => {
  gsap.from('.hero-title', {
    duration: 1,
    y: 100,
    opacity: 0,
    ease: 'power4.out'
  })

  gsap.from('.hero-subtitle', {
    duration: 1,
    y: 50,
    opacity: 0,
    delay: 0.3,
    ease: 'power4.out'
  })
})
</script>

<style lang="scss" scoped>
.home {
  min-height: 100vh;
  background: $background-primary;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba($primary-color, 0.03) 0%, transparent 30%),
    radial-gradient(circle at 90% 80%, rgba($primary-color, 0.03) 0%, transparent 30%);

  .main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: $spacing-xl $spacing-lg;
  }

  .hero-section {
    text-align: center;
    padding: calc($spacing-xxl + 20px) 0;
    margin-bottom: $spacing-xl;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 160%;
      height: 160%;
      background: $gradient-primary;
      opacity: 0.04;
      transform: translate(-50%, -50%) rotate(-3deg);
      border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
      filter: blur(80px);
      z-index: -1;
    }

    .hero-title {
      font-size: 56px;
      font-weight: 700;
      margin-bottom: $spacing-lg;
      background: $gradient-primary;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      position: relative;
      letter-spacing: -0.02em;
      line-height: 1.2;
      
      @media (max-width: $screen-sm) {
        font-size: 42px;
      }
    }

    .hero-subtitle {
      font-size: 24px;
      color: $text-secondary;
      position: relative;
      margin-bottom: calc($spacing-xl + 20px);
      
      @media (max-width: $screen-sm) {
        font-size: 18px;
      }
    }
  }

  .search-section {
    margin: 60px auto 20px;
    max-width: 680px;
    width: 100%;
    padding: 0 20px;

    .search-box {
      position: relative;
      
      .search-input-wrapper {
        display: flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.9);
        border: 2px solid #4CD964;
        border-radius: 100px;
        padding: 12px 20px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(76, 217, 100, 0.1);

        &:hover {
          border-color: #34C759;
          box-shadow: 0 6px 16px rgba(76, 217, 100, 0.15);
        }

        &:focus-within {
          border-color: #32C75A;
          box-shadow: 0 8px 20px rgba(76, 217, 100, 0.2);
          background: #FFFFFF;
        }

        .search-icon {
          font-size: 20px;
          color: #4CD964;
          margin-right: 12px;
        }

        .search-input {
          flex: 1;
          border: none;
          outline: none;
          background: transparent;
          font-size: 16px;
          color: $text-primary;
          
          &::placeholder {
            color: rgba($text-secondary, 0.6);
          }
        }

        .engine-select {
          display: flex;
          align-items: center;
          padding: 6px 12px;
          border-radius: 100px;
          background: rgba(76, 217, 100, 0.1);
          color: #4CD964;
          font-size: 14px;
          cursor: pointer;
          transition: all 0.3s ease;
          margin-left: 12px;
          
          &:hover {
            background: rgba(76, 217, 100, 0.15);
          }

          span {
            margin-right: 6px;
          }

          .el-icon {
            font-size: 12px;
            transition: transform 0.3s ease;
          }

          &.active .el-icon {
            transform: rotate(180deg);
          }
        }
      }

      .engine-dropdown {
        position: absolute;
        top: 100%;
        right: 0;
        width: 200px;
        margin-top: 8px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(76, 217, 100, 0.2);
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(20px);
        z-index: 100;

        .engine-option {
          display: flex;
          align-items: center;
          padding: 12px 16px;
          cursor: pointer;
          transition: all 0.2s ease;

          &:hover {
            background: rgba(76, 217, 100, 0.1);
          }

          &.active {
            background: rgba(76, 217, 100, 0.15);
            color: #4CD964;
          }

          .engine-icon {
            width: 20px;
            height: 20px;
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
        }
      }
    }
  }

  .recommended-tools {
    margin-top: 0;
    margin-bottom: 48px;

    .section-header {
      text-align: center;
      margin-bottom: 32px;

      h2 {
        font-size: 24px;
        font-weight: 600;
        margin: 0 0 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: var(--el-text-color-primary);
      }

      .subtitle {
        font-size: 14px;
        color: var(--el-text-color-secondary);
        margin: 0;
      }
    }

    .tools-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 24px;
      padding: 24px;

      .tool-card {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 24px;
        background: white;
        border-radius: 12px;
        text-decoration: none;
        transition: all 0.3s ease;
        border: 1px solid rgba(0, 0, 0, 0.06);
        opacity: 1;
        transform: none;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);

        &:hover {
          transform: translateY(-2px);
          border-color: var(--el-color-primary);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
          background: linear-gradient(to right bottom, white, rgba(255, 255, 255, 0.95));
        }

        .tool-icon {
          width: 48px;
          height: 48px;
          border-radius: 12px;
          background: var(--el-color-primary-light-9);
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 12px rgba(var(--el-color-primary-rgb), 0.1);
          overflow: hidden;

          img {
            width: 24px;
            height: 24px;
            object-fit: contain;
          }
        }

        .tool-info {
          flex: 1;

          .tool-name {
            font-size: 16px;
            font-weight: 600;
            color: var(--el-text-color-primary);
            margin: 0 0 6px;
          }

          .tool-desc {
            font-size: 14px;
            color: var(--el-text-color-secondary);
            margin: 0;
            line-height: 1.5;
          }
        }
      }
    }
  }
}

// 暗黑模式适配
:root.dark {
  .home {
    background: #000;
    background-image: 
      radial-gradient(circle at 10% 20%, rgba(41, 98, 255, 0.03) 0%, transparent 40%),
      radial-gradient(circle at 90% 80%, rgba(41, 98, 255, 0.03) 0%, transparent 40%);

    .hero-section {
      &::before {
        opacity: 0.03;
        background: linear-gradient(135deg, #2962FF, #2979FF);
        filter: blur(80px);
      }
      
      .hero-title {
        color: #fff;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }

      .hero-subtitle {
        color: rgba(255, 255, 255, 0.7);
      }
    }

    .search-section {
      .search-box {
        .search-input-wrapper {
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.1);
          backdrop-filter: blur(10px);

          &:hover {
            border-color: rgba(255, 255, 255, 0.2);
          }

          &:focus-within {
            border-color: var(--el-color-primary);
            background: rgba(255, 255, 255, 0.08);
          }

          .search-icon {
            color: rgba(255, 255, 255, 0.5);
          }

          .search-input {
            color: rgba(255, 255, 255, 0.9);
            
            &::placeholder {
              color: rgba(255, 255, 255, 0.3);
            }
          }
        }

        .engine-dropdown {
          background: rgba(0, 0, 0, 0.8);
          border: 1px solid rgba(255, 255, 255, 0.1);
          backdrop-filter: blur(10px);

          .engine-option {
            &:hover {
              background: rgba(255, 255, 255, 0.05);
            }

            &.active {
              background: rgba(var(--el-color-primary-rgb), 0.1);
            }

            .engine-icon {
              img {
                filter: brightness(1.2);
              }
            }
          }
        }
      }
    }

    .recommended-tools {
      .section-header {
        h2 {
          color: #fff;

          .el-icon {
            color: var(--el-color-primary);
          }
        }

        .subtitle {
          color: rgba(255, 255, 255, 0.5);
        }
      }

      .tools-grid {
        .tool-card {
          background: rgba(255, 255, 255, 0.04);
          border-color: rgba(255, 255, 255, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);

          &:hover {
            border-color: var(--el-color-primary);
            background: rgba(255, 255, 255, 0.06);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
          }

          .tool-icon {
            background: rgba(var(--el-color-primary-rgb), 0.1);
            box-shadow: 0 4px 12px rgba(var(--el-color-primary-rgb), 0.15);
          }

          .tool-info {
            .tool-name {
              color: rgba(255, 255, 255, 0.9);
            }

            .tool-desc {
              color: rgba(255, 255, 255, 0.6);
            }
          }
        }
      }
    }
  }
}
</style> 